import React, { Component } from "react";
import { Rate } from "antd";
import './App.styl'
class App extends Component {
  state = {
    books: [],
  };
  render() {
    return (
      <div className="container">
        {
          this.state.books.map((item, index) => {
            return (
              <div className="item" key={index}>
                <div className="image-box">
                  <img className="image" src={item.coverImage} alt="图书" />
                </div>
                <div className="info-box">
                  <div className="title">{item.title}</div>
                  <div className="raiting">({item.evaluate}人评价)
                    评分:{item.rating}
                    <Rate disabled allowHalf defaultValue={item.rating/2} />;
                  </div>
                  <div className="info">{item.labels.join('/')}</div>
                </div>
              </div>
            )
          })
        }
      </div>
    )
  }
  /* 需要将http请求放在componentDidMount */
  componentDidMount() {
    fetch("http://122.112.161.135:8000/book")
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        this.setState({
          books: data,
        });
      });
  }
}
export default App;
